<template>
  <div>
    <el-container class="homepage-container">
      <el-aside width="100%" class="left-container">
        <!-- 作者栏 -->
        <div class="author-content">
          <div class="author">{{ userInfo.name }}</div>
          <div class="info-list">
            <div class="info">
              <p class="info-top">{{ userInfo.articles_count }}</p>
              <p class="info-bottom">文章数</p>
            </div>
            <!-- <el-divider direction="vertical"></el-divider> -->
            <div class="info">
              <p class="info-top">{{ userInfo.music_score_count }}</p>
              <p class="info-bottom">乐谱数</p>
            </div>
            <!-- <el-divider direction="vertical"></el-divider> -->
            <div class="info">
              <p class="info-top">{{ userInfo.videos_count }}</p>
              <p class="info-bottom">视频数</p>
            </div>
            <!-- <el-divider direction="vertical"></el-divider> -->
            <div class="info">
              <p class="info-top">{{ userInfo.documents_count }}</p>
              <p class="info-bottom">文档数</p>
            </div>
          </div>
        </div>
        <!-- 资源栏 -->
        <div class="resource-content">
          <el-tabs @tab-click="SelectTabs" v-model="activeName">
            <!-- 文章 -->
            <el-tab-pane name="article">
              <span slot="label"
                ><svg
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  height="1em"
                  focusable="false"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM7 6C6.44772 6 6 6.44772 6 7C6 7.55228 6.44771 8 7 8H17C17.5523 8 18 7.55228 18 7C18 6.44772 17.5523 6 17 6H7ZM6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44771 13 6 12.5523 6 12ZM7 16C6.44772 16 6 16.4477 6 17C6 17.5523 6.44772 18 7 18H13C13.5523 18 14 17.5523 14 17C14 16.4477 13.5523 16 13 16H7Z"
                    fill="currentColor"
                  ></path>
                </svg>
                文章</span
              >
              <div class="article-list">
                <el-card
                  class="article"
                  v-for="article in articleList"
                  :key="article.id"
                >
                  <ArticleCard :article="article" />
                </el-card>
                <el-pagination
                  small
                  v-show="articleList.length"
                  background
                  :current-page="page"
                  @current-change="pageChange"
                  :page-size="limit"
                  layout="prev, pager, next"
                  :total="userInfo.articles_count"
                >
                </el-pagination>
                <div v-show="!articleList.length" class="article-list">
                  <el-empty description="没有任何文章"></el-empty>
                </div>
              </div>
            </el-tab-pane>
            <!-- 视频 -->
            <el-tab-pane name="video">
              <span slot="label">
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  height="1em"
                  focusable="false"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M3 4C1.89543 4 1 4.89543 1 6V18C1 19.1046 1.89543 20 3 20H14C15.1046 20 16 19.1046 16 18V6C16 4.89543 15.1046 4 14 4H3ZM7.9823 8H4.9823V11H7.9823V8Z"
                    fill="currentColor"
                  ></path>
                  <path
                    d="M21.5526 6.72418C22.2176 6.39151 23.0001 6.875 23.0001 7.6185V16.3815C23.0001 17.125 22.2176 17.6085 21.5526 17.2758L17.5565 15.2765C17.2178 15.107 17.0039 14.7608 17.0039 14.3821V12V9.61786C17.0039 9.23918 17.2178 8.89298 17.5565 8.72354L21.5526 6.72418Z"
                    fill="currentColor"
                  ></path>
                </svg>
                视频
              </span>
              <el-card
                class="video"
                style="margin-bottom:20px"
                v-for="video in videoList"
                :key="video.id"
              >
                <VideoCard :video="video" />
              </el-card>
              <el-pagination
                small
                v-show="videoList.length"
                background
                :current-page="page"
                @current-change="pageChange"
                :page-size="limit"
                layout="prev, pager, next"
                :total="userInfo.videos_count"
              >
              </el-pagination>
              <div v-show="!videoList.length" class="article-list">
                <el-empty description="没有任何视频"></el-empty>
              </div>
            </el-tab-pane>
            <!-- 文档 -->
            <el-tab-pane name="document">
              <span slot="label">
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  height="1em"
                  focusable="false"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M12 2C12 1.44772 11.5523 1 11 1H6C4.89543 1 4 1.89543 4 3V21C4 22.1046 4.89543 23 6 23H18C19.1046 23 20 22.1046 20 21V10C20 9.44772 19.5523 9 19 9H14C12.8954 9 12 8.10457 12 7V2ZM7 8C7 7.44772 7.44772 7 8 7H9C9.55228 7 10 7.44772 10 8C10 8.55228 9.55228 9 9 9H8C7.44772 9 7 8.55228 7 8ZM7 13C7 12.4477 7.44772 12 8 12H16C16.5523 12 17 12.4477 17 13C17 13.5523 16.5523 14 16 14H8C7.44772 14 7 13.5523 7 13ZM8 17C7.44772 17 7 17.4477 7 18C7 18.5523 7.44772 19 8 19H16C16.5523 19 17 18.5523 17 18C17 17.4477 16.5523 17 16 17H8ZM19.0686 7.49999H14.5C13.9477 7.49999 13.5 7.05228 13.5 6.49999V1.93136C13.5 1.21864 14.3617 0.861707 14.8657 1.36568L19.6343 6.13431C20.1383 6.63828 19.7814 7.49999 19.0686 7.49999Z"
                    fill="currentColor"
                  ></path>
                </svg>
                文档
              </span>
              <el-card
                class="document"
                v-for="document in documentList"
                :key="document.id"
              >
                <DocumentManageCard :document="document" :isEdit="false" />
              </el-card>
              <el-pagination
                small
                v-show="documentList.length"
                background
                :current-page="page"
                @current-change="pageChange"
                :page-size="limit"
                layout="prev, pager, next"
                :total="userInfo.documents_count"
              >
              </el-pagination>

              <div v-show="!documentList.length" class="article-list">
                <el-empty description="没有任何文档"></el-empty>
              </div>
            </el-tab-pane>

            <el-tab-pane name="musicScore">
              <span slot="label"
                ><svg
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  height="1em"
                  focusable="false"
                  aria-hidden="true"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M12 2C12 1.44772 11.5523 1 11 1H6C4.89543 1 4 1.89543 4 3V21C4 22.1046 4.89543 23 6 23H18C19.1046 23 20 22.1046 20 21V10C20 9.44772 19.5523 9 19 9H14C12.8954 9 12 8.10457 12 7V2ZM7 8C7 7.44772 7.44772 7 8 7H9C9.55228 7 10 7.44772 10 8C10 8.55228 9.55228 9 9 9H8C7.44772 9 7 8.55228 7 8ZM7 13C7 12.4477 7.44772 12 8 12H16C16.5523 12 17 12.4477 17 13C17 13.5523 16.5523 14 16 14H8C7.44772 14 7 13.5523 7 13ZM8 17C7.44772 17 7 17.4477 7 18C7 18.5523 7.44772 19 8 19H16C16.5523 19 17 18.5523 17 18C17 17.4477 16.5523 17 16 17H8ZM19.0686 7.49999H14.5C13.9477 7.49999 13.5 7.05228 13.5 6.49999V1.93136C13.5 1.21864 14.3617 0.861707 14.8657 1.36568L19.6343 6.13431C20.1383 6.63828 19.7814 7.49999 19.0686 7.49999Z"
                    fill="currentColor"
                  ></path>
                </svg>
                乐谱</span
              >

              <div class="article-list">
                <el-card
                  class="article"
                  v-for="musicScore in musicScoreList"
                  :key="musicScore.id"
                >
                  <MusicScoreCard :musicScore="musicScore" />
                </el-card>
                <el-pagination
                  small
                  v-show="musicScoreList.length"
                  background
                  :current-page="page"
                  @current-change="pageChange"
                  :page-size="limit"
                  layout="prev, pager, next"
                  :total="userInfo.music_score_count"
                >
                </el-pagination>
                <div v-show="!musicScoreList.length" class="article-list">
                  <el-empty description="没有任何乐谱"></el-empty>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-aside>
      <!-- <el-main class="Rank-content">
        <RankList />
      </el-main> -->
    </el-container>
  </div>
</template>

<script>
// 引入组件
import RankList from '@/components/Rank/RankList'
import ArticleCard from '@/components/Article/ArticleCard'
import MusicScoreCard from '@/components/MusicScore/MusicScoreCard'
import VideoCard from '@/components/Video/VideoCard'
import DocumentManageCard from '@/components/Document/DocumentManageCard'
import { getMusicScoreList } from '../../api/modules/musicScore'
import Pagination from '@/components/Tools/Pagination'
export default {
  props: {},
  components: {
    RankList,
    ArticleCard,
    VideoCard,
    DocumentManageCard,
    MusicScoreCard,
    Pagination
  },
  data() {
    return {
      page: 1,
      limit: 5,
      articleList: [],
      userInfo: {},
      videoList: [],
      documentList: [],
      musicScoreList: [],
      activeName: 'article'
    }
  },
  computed: {
    user_id() {
      return this.$route.params.id
    },
    isMobile() {
      return this.$data.isMobile
    }
  },
  watch: {
    '$route.params.id': {
      handler(val) {
        window.location.reload()

        // 或者使用路由跳转到当前页面
        this.$router.replace(this.$router.currentRoute)
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      // // 获取数据
      if (!this.user_id) {
        this.$message.error('该用户不存在')
        return this.$router.push('/article')
      }
      this.getArticleList()
      // this.getVideoList()
      // this.getDocumentList()
      // this.getMusicScoreList()
      this.getAuthorInfo()
    })
  },
  methods: {
    SelectTabs(tab, event) {
      this.page = 1
      // 根据选中的tab加载数据
      switch (this.activeName) {
        case 'article':
          this.getArticleList()
          break
        case 'musicScore':
          this.getMusicScoreList()
          break
        case 'video':
          this.getVideoList()
          break
        case 'document':
          this.getDocumentList()
          break
      }
    },
    // 获取作者信息
    async getAuthorInfo() {
      const res = await this.$API.user.getUserById(this.user_id)
      if (res.status == 200) {
        this.userInfo = res.data
      } else {
        // 若不存在该用户就返回到主页
        this.$message.error('没有该用户')
        this.$router.push('/article')
      }
    },
    // 页数变化
    pageChange(page) {
      // console.log(page)
      this.page = page
      // 根据选中的tab加载数据
      switch (this.activeName) {
        case 'article':
          this.getArticleList()
          break
        case 'musicScore':
          this.getMusicScoreList()
          break
        case 'video':
          this.getVideoList()
          break
        case 'document':
          this.getDocumentList()
          break
      }
    },
    // 获取文章列表
    async getArticleList() {
      const { user_id, limit, page } = this
      const res = await this.$API.article.getArticleByAuthorId(
        user_id,
        limit,
        page
      )
      if (!res.data) return (this.articleList = [])

      if (res.status == 200) {
        this.articleList = res.data.payload
      }
    },
    // 获取视频列表
    async getVideoList() {
      const { user_id, limit, page } = this
      const res = await this.$API.video.getVideoByAuthorId(user_id, limit, page)
      if (res.status == 200) {
        this.videoList = res.data.payload
      }
    },
    // 获取文档列表
    async getDocumentList() {
      const { user_id, limit, page } = this
      const res = await this.$API.document.getDocumentByAuthorId(
        user_id,
        limit,
        page
      )
      if (res.status == 200) {
        this.documentList = res.data.payload
      }
    },
    // 获取乐谱列表
    // 获取文章列表
    async getMusicScoreList() {
      const { user_id, limit, page } = this
      const res = await this.$API.musicScore.getMusicScoreByAuthorId(
        user_id,
        limit,
        page
      )
      if (!res.data) return (this.musicScoreList = [])
      if (res.status == 200) {
        this.musicScoreList = res.data.payload
      }
    }
  }
}
</script>

<style scoped>
.homepage-container {
  min-height: 84vh;
  margin: 30px 10px;
}
.left-container {
  overflow-x: hidden;
}
/* 作者 */
.author-content {
  background-color: #ffffff;
  width: 100%;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.author {
  font-size: 20px;
  font-weight: bold;
  color: #2f2f2f;
}
.article {
  margin: 15px 0;
  width: 100%;
}
.card {
}
.info-list {
  margin: 20px 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.el-divider--vertical {
  height: 100%;
}
.info {
  line-height: 1.5em;
  width: 10%;
  text-align: center;
}
.info-top {
  font-size: 18px;
}
.info-bottom {
  font-size: 12px;
  color: #b19696;
}
/* 资源管理 */
.resource-content {
  width: 100%;
  margin-top: 20px;
}
/* 右侧排名栏 */
.Rank-content {
  width: 100%;
  padding: 0px;
  overflow-x: hidden;
}
.document {
  margin: 10px 0;
}
.resource-content >>> .el-tabs__active-bar {
  background-color: #0064fa;
}
.resource-content >>> .el-tabs__item.is-active {
  color: #0064fa;
}
/* 移动端样式 */
@media screen and (max-width: 767px) {
  .author-content {
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    width: 100%;
    justify-content: center;
    border-radius: 20px;
  }
  .resource-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
  }
  .info-list {
    margin: 20px 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .info {
    width: 22%;
    line-height: 1.5em;
    text-align: center;
  }
  /* 其他移动端样式设置 */
}
</style>
